<style scoped lang="less">
</style>
<template>
	<iot-blk class="kitchen-region" :moreType="0">
		<div class="region-search flex v-c">
            <el-input class="flex-1" v-model="keyword" placeholder="请输入搜索名称" />
            <a href="javascript:;" @click="searchAction"><i class="iconfont icon-search"></i></a>
        </div>
        <el-tree
            ref="tree"
            class="kitchen-regin-tree"
            :props="props"
            :load="loadNode"
            lazy
            :filter-node-method="filterNode"
        >
            <p class="custom-node flex v-c" slot-scope="{ node, data }" v-if="node.level<6">
                <span class="flex-1">{{ node.label }}</span>
                <a href="javascript:;" @click="clickArrow(node,data)" v-if="!node.isLeaf">
                    <i class="iconfont icon-more" :class="{up: node.expanded}"></i>
                </a>
            </p>
            <div class="node-video" v-else>
                <div class="no-data" v-if="data.id==0">暂无设备</div>
                <ul class="node-video-list" v-else>
                    <!-- {{data}} -->
                    <li class="node-video-item"
                        v-for="(item,index) in data.list"
                        :key="item.id"
                        @click="playVideo(item)"
                    >
                        <div class="node-video-blk">
                            <img class="play-icon" src="@/assets/images/iot/icon-play.png" alt="">
                        </div>
                        <h6>{{item.name}}</h6>
                    </li>
                </ul>
            </div>
        </el-tree>
	</iot-blk>
</template>
<script>
import { mapState } from 'vuex'
import List from '@/components/iot/AlarmList.vue'
export default {
	name: 'Today',
	components: {
		List
	},
	props: {
		type: {
    		type: String,
			default: 'fireControl'
    	},
    	data: {
    		type: Object,
			default () {
				return {}
			}
    	},
	},
	computed: {
		...mapState([
			'scale'
		])
	},
	watch: {},
	data () {
		return {
			loading: false,
            keyword: '',
            props: {
                label: 'name',
                children: 'children',
                isLeaf: 'leaf'
            },
		}
	},
	methods: {
        clickArrow (node,data) {
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        // getData (pid) {
        //     return this.$get('/business/business/regionLists',{pid}).then(res=>{
                
        //     })
        // },
        playVideo (item) {
            this.$emit('play', item)
        },
		searchAction () {
            this.$refs.tree.filter(this.keyword)
        },
        async loadNode(node, resolve) {
            if (node.level === 0) {
                let res = await this.$get('/business/business/regionLists',{pid:0})
                return resolve(res.data);
            }else if (node.level<4){
                let pid = node.data.id
                let res = await this.$get('/business/business/regionLists',{pid})
                return resolve(res.data);
            }else if(node.level<5){
                let regionId = node.data.id
                let res = await this.$get('/business/business/getBusinessLists',{regionId})
                return resolve(res.data);
            }else{
                let businessId = node.data.id
                let res = await this.$get('/fireFightingIOT/device/getBrightKitchenDevice',{businessId})
                let list = res.data.map(item=>{
                    item.leaf = true
                    return item
                })
                let treeData = []
                if(list.length==0){
                    treeData = [{id:0,leaf: true}]
                }else{
                    treeData = [{id:1,leaf: true,list:list}]
                }
                return resolve(treeData);
            }

            setTimeout(() => {
                const data = [{
                    name: 'leaf',
                    leaf: true
                }, {
                    name: 'zone'
                }];

                resolve(data);
            }, 500);
        }
	},
	created () {
		// this.getData(0)
	},
}
</script>